<template>
    <div class="about">
        <div class="chart-label">
            单位：次
        </div>
        <v-echart
            :options='option'
        />
        <test-table
            :table='table'
            :total='total'
            :option='option'
        />
    </div>
</template>
<script>
import Echarts from 'vue-echarts'
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/tooltip'
import TestTable from '@/components/TestTable'
export default {
    components: {
        TestTable,
        'v-echart': Echarts
    },
    data() {
        return {
            table: [1, 2, 3],
            total: 100,
            option: {
                tooltip: {
                    show: true, // 悬浮框显示
                    trigger: 'axis',
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'none' // 默认为直线，可选为：'line' | 'shadow'
                    },
                    padding: 12 // 悬浮框padding面积
                },
                legend: { // 右上角导航
                    right: 0,
                    itemWidth: 8, // 右上角导航大小
                    itemHeight: 8,
                    itemGap: 24,
                    textStyle: {
                        color: '#666'
                    }
                },
                grid: { // 直角坐标系 整个图偏移
                    left: 5,
                    right: 0,
                    top: 100,
                    bottom: 10,
                    containLabel: true
                },
                xAxis: [ // X轴
                    {
                        type: 'category',
                        data: ['本部门专业法官会议', '跨部门专业法官会议'],
                        axisLabel: {
                            show: true, // X轴下面的名字显示
                            textStyle: {
                                color: '#666'
                            }
                        },
                        axisLine: {
                            show: true, // X轴实线
                            lineStyle: {
                                color: '#e9e9e9'
                            }
                        },
                        axisTick: {
                            show: false // 0 向下的点
                        }
                    }
                ],
                yAxis: { // Y轴
                    nameGap: 30,
                    show: true,
                    axisLine: {
                        show: false // Y轴线消失
                    },
                    axisTick: {
                        show: false // 0向左的点
                    },
                    splitLine: {
                        lineStyle: {
                            type: 'dashed', // 虚线
                            color: '#e9e9e9'
                        }
                    }
                },
                series: [ // 数据
                    {
                        name: '会议',
                        type: 'bar',
                        barWidth: '12', // 展示宽度
                        barMinHeight: 1,
                        data: [104, 21],
                        color: '#1890ff'
                    },
                    {
                        name: '案件',
                        type: 'bar',
                        barWidth: '12', // 展示宽度
                        barMinHeight: 1,
                        data: [500, 50],
                        color: '#ffcc00'
                    },
                    {
                        name: '议题',
                        type: 'bar',
                        barWidth: '12', // 展示宽度
                        barMinHeight: 1,
                        data: [36, 19],
                        color: '#13c2c2'
                    }
                ]
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.about{
    position: relative;
    .chart-label {
        position: absolute;
        left: 0;
        top: 5px;
        font-size: 12px;
        color: gray;
    }
}
</style>
